<script setup lang="ts">
import { ElRow, ElCol, ElAnchor, ElAnchorLink, ElDivider } from "element-plus";
import { ref, onMounted, onUnmounted, watch } from "vue";
import { marked } from 'marked'

import { useRoute } from 'vue-router'

const scriptUrl = defineModel('scriptUrl');
interface Props {
  scriptUrl?: string;
}

defineOptions({
  name: "MarkdownCom",
});

let html = ref('');

const init = function () {
  const route = useRoute();
  marked.use({
    async: false,
    pedantic: false,
    gfm: true,
    mangle: false,
    headerIds: false
  });
  scriptUrl.value = route.meta.mdUrl;
  fetch(scriptUrl.value)
    .then(function (data) {
      return data.text();
    })
    .then(function (data) {
      html.value = data
    });
};

onMounted(() => {
  init();
});
</script>

<template>

  <v-md-preview :text="html" :include-level="[2, 3]"></v-md-preview>
    
  
</template>

<style scoped>
.content_container {
  width: 100%;
  height: calc(100vh - 88px);
  /* padding-left: 2.5%;
  padding-right: 2.5%; */
  /* padding-top: 5%; */
  display: flex;
  background: #ffffff;
}
</style>
